<template>
  <header class="v-header">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
        <router-link :to="item.path">{{item.title}}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="profile">
      <span class="username">
        <span>您好，{{account.nickName || account.userName }}</span>
        <el-link class="sm-link" @click="$emit('on-refresh')">刷新</el-link>
        <el-link class="sm-link" @click="$emit('on-change-theme')">主题</el-link>
      </span>
      <el-dropdown trigger="click">
        <el-avatar :size="40" :src="require('@/assets/default.gif')" @error="handleError">
          <img :src="require('@/assets/avatar-default.jpg')" />
        </el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="$emit('on-logout')">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <Weather />
  </header>
</template>
<script>
import { getWeather } from '@/core/weather'

export default {
  props: {
    account: {
      type: Object,
      default () {
        return {}
      }
    },
    breadList: {}
  },
  methods: {
    handleError () {
      return true
    },
    handleTriggerClick () {
      this.$emit('menu-collapse')
    }
  },
  components: {
    Weather: {
      data () {
        return {
          error: null,
          weatherInfo: null
        }
      },
      created () {
        getWeather()
          .then((res) => {
            this.weatherInfo = res
          })
          .catch((err) => (this.error = err))
      },
      render () {
        const { error, weatherInfo } = this
        if (!weatherInfo) return null

        const weeks = weatherInfo.data
        const city = weatherInfo.city

        return error ? null : (
          <div class="weather-wrapper">
            <p>{weeks[0].date} {weeks[0].week} {city} 今 {weeks[0].wea} {weeks[0].tem2.replace(/℃$/g, '')}~{weeks[0].tem1} {weeks[0].air_level} | 明 {weeks[1].wea} {weeks[1].tem2.replace(/℃$/g, '')}~{weeks[1].tem1}</p>
          </div>
        )
      }
    }
  }
}
</script>
<style lang="scss">
.weather-wrapper {
  position: absolute;
  right: 0;
  top: 70px;
  padding-right: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
  > p {
    font-size: 12px;
    color: #e4e7ed;
  }
}

@media screen and (max-width: 700px) {
  .weather-wrapper {
    display: none;
  }
}
.sm-link {
  vertical-align: baseline !important;
  .el-link--inner {
    font-size: 12px;
    color: #fff;
    font-weight: bold;
  }
}
</style>
<style lang="scss" scoped>
@include b(header) {
  left: 260px;
  position: absolute;
  top: 0;
  z-index: 1;
  right: 0;
  color: #fff;
  padding: 28px 0;
  border: 0;
  align-items: center;
  box-shadow: 0 2px 2px 0 rgba(60, 75, 100, 0.14),
    0 3px 1px -2px rgba(60, 75, 100, 0.12), 0 1px 5px 0 rgba(60, 75, 100, 0.2);
  clip-path: inset(0 0 -1000px 0);
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(90deg, #0c2646 0, #204065 60%, #2a5788);
  overflow: hidden;
  @include e(trigger) {
    margin-left: 20px;
    padding: 18px 0;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
  }
  .profile {
    display: flex;
    align-items: center;
    margin-right: 30px;
    margin-left: auto;
    .username {
      margin-right: 10px;
      font-size: 14px;
    }
  }

  >>> .el-badge {
    margin-right: 25px;
    .el-badge__content.is-fixed {
      // top: 10px;
      padding: 0 2px;
    }
    .el-icon-message-solid {
      font-size: 20px;
    }
  }

  >>> .el-avatar {
    cursor: pointer;
  }

  >>> .el-breadcrumb {
    padding: 0 20px;
    .el-breadcrumb__item {
      padding: 18px 0;
      &:last-child {
        a {
          color: #c0c4cc !important;
        }
      }
      .el-breadcrumb__inner {
        &.is-link {
          color: #fff;
        }
        a {
          color: #fff;
        }
      }
    }
  }
}
</style>
